<template>
  <div class="raceNotice">
    <div class="r-header">
      <div class="r-h-title">
        <i class="iconfont icon-gonggao1"></i>比赛公告
      </div>
    </div>
    <div class="r-doing">
      <n-button class="r-d-btn" size="small" round type="success" @click="noticeShow = true"><i
          class="iconfont icon-tianjia"></i>创建公告</n-button>
      <div class="r-d-search">
        <n-input class="r-d-s-input" placeholder="搜索公告" round size="small" v-model:value="searchVal">
          <template #suffix>
            <i class="iconfont icon-sousuo"></i>
          </template>
        </n-input>
      </div>
    </div>
    <div class="r-table">
      <el-table class="table" :data="noticeList.records" size="small" stripe>
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" align="center"></el-table-column>
        <el-table-column prop="creator" label="作者" align="center"></el-table-column>
        <el-table-column prop="createTime" label="开始时间" align="center" min-width="150">
          <template #default="scoped">
            <div class="i-t-time">
              {{ scoped.row.createTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center" min-width="150">
          <template #default="scoped">
            <div class="i-t-time">
              {{ scoped.row.updateTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="是否可见" align="center">
          <template #default="scoped">
            <el-switch v-model="scoped.row.showNotice" :active-value="true" :inactive-value="false"
              @change="isShowAnnouncement(scoped.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template #default="scoped">
            <div class="btns">
              <div>
                <el-tooltip content="更新" placement="top">
                  <n-button class="btn" size="tiny" type="info" @click="updateNotice(scoped.row)"><i
                      class="iconfont icon-bianji"></i></n-button>
                </el-tooltip>
                <n-popconfirm positive-text="确认" negative-text="取消" @positive-click="delNotice(scoped.row.id)">
                  <template #trigger>
                    <n-tooltip trigger="hover">
                      <template #trigger>
                        <n-button class="btn" size="tiny" type="error"><i class="iconfont icon-shanchu"></i></n-button>
                      </template>
                      删除
                    </n-tooltip>
                  </template>
                  确认删除公告？
                </n-popconfirm>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="r-foot">
      <el-pagination class="pagination" :page-sizes="[20, 50, 99]" background small layout="prev, pager, next,sizes"
        :total="Number(noticeParams.total)" v-model:current-page="noticeParams.pageNum"
        v-model:page-size="noticeParams.pageSize" />
    </div>
    <el-drawer v-model="noticeShow" size="100%" direction="ttb" :auto-focus="false" :show-close="false">
      <template #header>
        <div class="header">
          <div class="header-title">
            <el-form>
              <el-form-item prop="title">
                <el-input id="title" class="title" v-model="title" placeholder="此处输入公告标题..." size="large" />
              </el-form-item>
            </el-form>
          </div>
          <div class="doing">
            <div class="is-top">
              <span>是否可见:</span>
              <n-switch v-model:value="canSee" size="small" />
            </div>
            <n-button type="error" size="tiny" @click="
              noticeShow = false;
            setUp();
            ">
              <template #icon>
                <i class="iconfont icon-quxiao"></i>
              </template>
              取消发布
            </n-button>
            <n-button @click="postNotice" type="primary" size="tiny" v-show="!isUpdate">
              <template #icon>
                <i class="iconfont icon-fabu-copy1-copy"></i>
              </template>
              发布公告
            </n-button>
            <n-button @click="updateRaceNotice" type="primary" size="tiny" v-show="isUpdate">
              <template #icon>
                <i class="iconfont icon-fabu-copy1-copy"></i>
              </template>
              更新公告
            </n-button>
          </div>
        </div>
      </template>
      <div>
        <div class="proclama-content">公告内容</div>
        <v-md-editor v-model="content" :height="'540px'"
          :left-toolbar="'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link tip code | emoji'"></v-md-editor>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue"
import {
  postRaceNoticeAPI,
  getRaceNoticeAPI,
  updateRaceNoticeAPI,
  delRaceNotice,
} from "@/api/adminAPI/adminAPI.js"
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from "element-plus"
onMounted(() => {
  getNotice()
})

const searchVal = ref("")
const noticeList = ref({})
const noticeParams = ref({
  total: 0,
  pageSize: 20,
  pageNum: 1,
})
const noticeShow = ref(false)
const canSee = ref(true)
const isUpdate = ref(false)
const content = ref("")
const title = ref("")
const deboundTime = ref(null)
const route = useRoute()
const id = ref("")

const setUp = () => {
  noticeShow.value = false
  canSee.value = true
  isUpdate.value = false
  content.value = ""
  title.value = ""
  isUpdate.value = false
}
const postNotice = () => {
  if (deboundTime.value) {
    clearTimeout(deboundTime.value)
  }
  deboundTime.value = setTimeout(async () => {
    const data = {
      cid: route.params.cid,
      title: title.value,
      content: content.value,
      showNotice: canSee.value,
    }
    await postRaceNoticeAPI(data).then((res) => {
      if (res.data.code === 200) {
        ElMessage.success("发布成功")
        getNotice()
        setUp()
      }
    })
  }, 300)
}
const updateNotice = (row) => {
  canSee.value = row.showNotice
  content.value = row.content
  title.value = row.title
  id.value = row.id
  isUpdate.value = true
  noticeShow.value = true
}
const updateRaceNotice = () => {
  if (deboundTime.value) {
    clearTimeout(deboundTime.value)
  }
  deboundTime.value = setTimeout(async () => {
    const data = {
      id: id.value,
      cid: route.params.cid,
      showNotice: canSee.value, //是否展示
      title: title.value,
      content: content.value,
    }
    await updateRaceNoticeAPI(data).then((res) => {
      if (res.data.code === 200) {
        ElMessage.success("更新成功")
        setUp()
        getNotice()
      }
    })
  }, 300)
}
const getNotice = async () => {
  const data = {
    cid: route.params.cid,
    pageSize: noticeParams.value.pageSize,
    pageNum: noticeParams.value.pageNum,
    like: searchVal.value,
  }

  await getRaceNoticeAPI(data).then((res) => {
    if (res.data.code === 200) {
      noticeList.value = res.data.data
    }
  })
}
const delNotice = (id) => {
  if (deboundTime.value) {
    clearTimeout(deboundTime.value)
  }
  deboundTime.value = setTimeout(async () => {
    const data = [id]
    await delRaceNotice(data).then((res) => {
      if (res.data.code === 200) {
        ElMessage.success("删除成功")
        getNotice()
      }
    })
  }, 300)
}
watch(searchVal, () => {
  if (deboundTime.value) {
    clearTimeout(deboundTime.value)
  }
  deboundTime.value = setTimeout(() => {
    getNotice()
  }, 300)
})
</script>

<style lang="less" scoped>
.raceNotice {
  margin: auto;
  width: 96%;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9, -12px -12px 50px #ffffff;
  display: flex;
  flex-direction: column;

  .r-header {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 2px solid @lineColor;

    .r-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20.6px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 23.6px;
        height: 30px;
        margin-right: 2px;
      }
    }
  }

  .r-doing {
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    margin: 20px 0 0 0;
    padding-bottom: 10px;

    .r-d-search {
      display: flex;
      justify-content: flex-end;
      width: 40%;

      .r-d-s-input {
        height: 30px;
        line-height: 30px;
        width: 40%;
        margin-right: 10px;
      }

      .r-d-s-select {
        margin-right: 10px;

        ::v-deep(.el-input__wrapper) {
          border-radius: 50px;
        }
      }
    }

    .r-d-btn {
      margin: auto 20px;

      .iconfont {
        margin: auto 0;
        margin-right: 3px;
      }
    }
  }

  .r-table {
    user-select: none;

    .table {
      height: 72vh;

      .btns {
        display: flex;
        justify-content: center;

        .btn {
          margin: auto 5px;
        }
      }
    }
  }

  .r-foot {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
}

::v-deep(.el-drawer) {
  --n-body-padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

::v-deep(.el-drawer__header) {
  display: block;
  padding: 10px 0 20px 0;
  border-bottom: none;
  margin-bottom: 0px;

  .header {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid rgba(240, 240, 240, 1);

    .doing {
      width: 22%;
      display: flex;

      .n-button {
        margin: 0 5px;
      }

      .is-top {
        margin: 0 5px;

        span {
          font-size: 0.8875em;
          margin-right: 5px;
        }
      }
    }

    .header-title {
      min-width: 78%;
      margin-right: 15px;
      margin-top: 20px;
    }
  }
}

::v-deep(.header-title .el-input__wrapper) {
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: text;
  padding: 7px 15px;
  font-size: 16px;

  .el-input__inner {
    font-weight: bold;
    cursor: text !important;
  }
}

::v-deep(.el-drawer__body) {
  --el-drawer-padding-primary: 0px 20px;

  .proclama-content {
    font-size: 19px;
    height: 40px;
    line-height: 40px;
    width: 10%;
    font-weight: 600;
    color: #5e5e5e;
  }

  .post-time {
    margin-top: 20px;
    display: flex;
    align-items: center;

    div {
      margin-right: 10px;
      font-size: 16px;
      line-height: 40px;
      font-weight: 550;
      color: #5e5e5e;
    }
  }

  .bottom {
    padding: 5px 10px;
    border: 1px solid rgba(240, 240, 240, 1);
    display: flex;

    .bottom-category {
      padding-left: 12px;

      .n-button {
        height: 32px;
        border-radius: 16px;
        background-color: rgba(0, 10, 32, 0.05);
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        cursor: pointer;
        font-size: 12px;
        color: rgba(38, 38, 38, 0.75);
      }
    }

    .bottom-tag {
      display: flex;
      align-items: center;
      margin-left: 20px;
      color: rgba(116, 121, 116, 0.89);
      font-size: 16px;

      .el-tag {
        background-color: rgba(255, 255, 255, 1);
        border: none;
        margin: 0 5px;

        ::v-deep(.el-icon) {
          color: rgba(255, 255, 255, 1);
          --el-tag-hover-color: rgba(39, 81, 89, 0.26);
        }
      }

      .tag {
        font-size: 12px;
        font-weight: 400;
        color: rgba(38, 38, 38, 0.75);
        height: 24px;
        border-radius: 12px;
        padding: 3px 8px;
        border: 1px solid rgba(0, 10, 32, 0.05);
        background-color: rgba(0, 10, 32, 0.05);
        cursor: pointer;
        transition: color 1s ease-out;
      }

      .active-tag {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(86, 203, 107, 1);
        background: linear-gradient(to right,
            rgba(86, 203, 107, 0.7),
            rgba(86, 203, 107, 0.8),
            rgba(86, 203, 107, 0.9));
        border-color: rgba(86, 203, 107, 1);
      }
    }
  }
}
</style>
